﻿
@{
    ViewData["Title"] = "CategoryInfoEdit";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

@section head{
    <link href="/css/bootstrap.min.css?v=3.3.6" rel="stylesheet" />
    <link href="/css/font-awesome.min.css?v=4.4.0" rel="stylesheet" />
    <link href="/css/plugins/jsTree/style.min.css" rel="stylesheet" />
    <link href="/css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet" />
    <link href="/css/animate.min.css" rel="stylesheet" />
    <link href="/css/style.min.css?v=4.1.0" rel="stylesheet" />
    <style type="text/css">
        #dTree {
            overflow-y: auto;
            border: 1px solid #ddd;
            padding: 10px;
        }

        .jstree-open > .jstree-anchor > .fa-folder:before {
            content: "\f07c";
        }

        .jstree-default .jstree-icon.none {
            width: 0;
        }

        .dSearch .btn {
            margin-top: 10px;
        }

        .dataTables_wrapper {
            padding-bottom: 0px;
        }

        div.dataTables_scrollBody table {
            margin-top: -18px !important;
        }

        .modal-body .input-group-addon {
            width: 105px;
        }

        .modal-body .input-group {
            margin-bottom: 10px;
            width: 100%;
        }

        .fixed-table-pagination .pagination-detail, .fixed-table-pagination div.pagination {
            margin-bottom: 0px;
        }
    </style>

}

<form id="form1" runat="server">
    <div id="dMain">
        <div class="wrapper wrapper-content animated fadeInRight">
            <div class="ibox" style="margin-bottom: 0px;">
                <div class="ibox-title">
                    <h5>门类管理</h5>
                </div>
                <div class="ibox-content">
                    <table style="width: 100%;">
                        <tr>
                            <td style="vertical-align: top; width: 300px;">
                                <div id="dTree">
                                    <div id="jstree1">
                                        @*<asp:Literal ID="ltlStr" runat="server"></asp:Literal>*@
                                    </div>
                                </div>
                            </td>
                            <td style="vertical-align: top; padding-left: 10px;">                                
                                <div class="tabs-container">
                                    <ul class="nav nav-tabs">
                                        <li class="active">
                                            <a data-toggle="tab" href="#tab-1" aria-expanded="true"> 第一个选项卡</a>
                                        </li>
                                        <li class="">
                                            <a data-toggle="tab" href="#tab-2" aria-expanded="false">第二个选项卡</a>
                                        </li>
                                    </ul>
                                    <div class="tab-content">
                                        <div id="tab-1" class="tab-pane active">
                                            <div class="panel-body">
                                                <strong>HTML5 文档类型</strong>
                                                <p>Bootstrap 使用到的某些 HTML 元素和 CSS 属性需要将页面设置为 HTML5 文档类型。在你项目中的每个页面都要参照下面的格式进行设置。</p>
                                            </div>
                                        </div>
                                        <div id="tab-2" class="tab-pane">
                                            <div class="panel-body">
                                                <strong>移动设备优先</strong>
                                                <p>在 Bootstrap 2 中，我们对框架中的某些关键部分增加了对移动设备友好的样式。而在 Bootstrap 3 中，我们重写了整个框架，使其一开始就是对移动设备友好的。这次不是简单的增加一些可选的针对移动设备的样式，而是直接融合进了框架的内核中。也就是说，Bootstrap 是移动设备优先的。针对移动设备的样式融合进了框架的每个角落，而不是增加一个额外的文件。</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <input id="hfLogInfo" type="hidden" value="删除了一条数据" />
    <input id="hfModular" type="hidden" value="人员身份" />
    <input id="hfPageUrl" type="hidden" value="@ViewBag.reurl" />
</form>

@section scripts{
    <script src="/js/jquery.min.js?v=2.1.4"></script>
    <script src="/js/bootstrap.min.js?v=3.3.6"></script>
    <script src="/js/plugins/jeditable/jquery.jeditable.js"></script>
    <script src="/js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
    <script src="/js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
    <script src="/js/plugins/bootstrap-table/bootstrap-table-export.js"></script>
    <script src="/js/plugins/bootstrap-table/tableExport.js"></script>
    <script src="/js/plugins/bootstrap-table/bootstrap-table-cookie.js"></script>

    <script src="/js/My97DatePicker/WdatePicker.js"></script>
    <script src="/js/plugins/layer/layer.min.js"></script>
    <script src="/js/plugins/jsTree/jstree.min.js"></script>
    <script src="/js/verification.js"></script>
    <script src="/js/zuiCode.js"></script>
    <script type="text/javascript">
            $(function () {
                //GetTabData('[]');
                $(window).resize(function () {
                    $('#tabData').bootstrapTable('resetView');
                });

                $("#dTree").height(GetHeight() - 123);

                $("#jstree1").jstree({
                    "core": {
                         "data":
                        {
                            url: '@Url.Action("GetDepartmentTreeJson", "Role")'
                        },
                        "check_callback": true
                    },
                    "plugins": ["types", "dnd"],
                    "types": {
                        "default": { "icon": "fa fa-folder" },
                        "html": { "icon": "fa fa-file-code-o" },
                        "svg": { "icon": "fa fa-file-picture-o" },
                        "css": { "icon": "fa fa-file-code-o" },
                        "img": { "icon": "fa fa-file-image-o" },
                        "js": { "icon": "fa fa-file-text-o" }
                    }
                }).on("ready.jstree", function (event, data) {
                    $("a.jstree-anchor").first().click();//默认选中第一个
                });
            })

            function GetTabData(_DMID) {
                $.ajax({
                    type: "post",
                    url: "@Url.Action("GetTabData", "Role")",
                    dataType: "json",
                    async: true,
                    data: {  DMID: _DMID },
                    success: function (msg) {
                        if (msg != null) {
                            BuildTable(msg);
                        }
                    }
                });
            }

            function BuildTable(DataStr) {
                $('#tabData').bootstrapTable("destroy");
                var tabHeight = document.documentElement.clientHeight - 100;
                //var DataJson = DataStr != "" ? JSON.parse(DataStr) : "";//格式化为json
                $('#tabData').bootstrapTable({
                    height: tabHeight,
                    data: DataStr,
                    dataType: "json",
                    columns: [
                        { align: 'center', width: "50px", checkbox: true },
                        { field: 'RName', align: 'left', width: "200px" },
                        { align: 'center', width: "100px", formatter: operateFormatter2 },
                        { field: 'Remark', align: 'center' },
                        {
                            align: 'center', width: "70px", formatter: function (value, row, index) {
                                return ["<i class=\"ihand fa fa-" + (row.Flag3 == "1" ? "check-square-o" : "square-o") + " text-success\" onclick=\"ChangeState('TRole','" + row.ID + "','Flag3','" + row.Flag3 + "')\"></i>"]
                            }
                        },
                        {
                            align: 'center', width: "70px", formatter: function (value, row, index) {
                                return ["<i class=\"ihand fa fa-" + (row.State == "1" ? "check-square-o" : "square-o") + " text-success\" onclick=\"ChangeState('TRole','" + row.ID + "','State','" + row.State + "')\"></i>"]
                            }
                        },
                        { field: 'Flag1', align: 'center', width: "60px", sortable: true },
                        { align: 'center', width: "100px", formatter: operateFormatter }
                    ],
                    toolbar: '#toolbar',//工具按钮用哪个容器
                    buttonsClass: "sm btn-white",//按钮class
                    pageSize: 100,//分页条数
                    clickToSelect: true,//设置true 将在点击行时，自动选择单选或复选框
                    singleSelect: true,//为true则禁止多选
                    cache: false,//是否缓存
                    cookie: true,//是否启用cookie
                    cookieIdTable: "UserRole",//cookie键值
                    pagination: true,//是否分页
                    showColumns: true,//是否显示所有的列
                    showRefresh: true,//是否显示刷新按钮
                    search: true,//是否启用搜索
                    showPaginationSwitch: true,//是否显示分页切换按钮
                    showExport: true,//是否启用导出
                    striped: false//是否显示行间隔色
                });
            }

            function operateFormatter(value, row, index) {
                var QXStr = "";
                $.ajax({
                    type: "Post",
                    url: "GetQX",
                    data: "{'Rid':'" + row.ID + "'}",
                    async: false,
                    dataType: "json",
                    contentType: "application/json;charset=utf-8",
                    success: function (msg) {
                        QXStr = msg.d;
                    }
                });

                return [
                    "<a title=\"修改\" class=\"text-success\" href=\"javascript:;\" onclick=\"showPage('修改人员身份信息','@Url.Action("UserRoleEdit","Role")?ID=" + row.ID + "',400,400,false,function(){$('a.jstree-clicked').first().click()})\">编辑</a>&emsp;" +
                    "<a title=\"删除\" class=\"text-danger\" href=\"javascript:;\" onclick=\"_Confirm('确定要删除这条数据？',function(){ DelData('@Url.Action("DelData", "EditData", new { area=""})','TRole','" + row.ID + "',function (){ GetTabData('" + row.DMID + "') }),function(){$('a.jstree-clicked').first().click()})  })\">删除</a>"
                ];
            }

            function operateFormatter2(value, row, index) {
                var str = "";
                if (row.Flag2 == "1") { str = "个人"; }
                else if (row.Flag2 == "2") { str = "部门"; }
                else if (row.Flag2 == "3") { str = "全院"; }
                return [
                    str
                ];
            }
    </script>
}
